<template>
  <a-card :bordered="false" style="height: 100%">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24" v-if="queryInfo && queryInfo.length > 0">
          <template v-for="(item, index) in queryInfo">
            <template v-if="item.hidden === '1'">
              <a-col
                v-if="item.view == 'datetime'"
                :md="12"
                :sm="16"
                :key="'query' + index"
                v-show="toggleSearchStatus"
              >
                <online-query-form-item
                  :queryParam="queryParam"
                  :item="item"
                  :dictOptions="dictOptions"
                ></online-query-form-item>
              </a-col>
              <a-col
                v-else
                :md="6"
                :sm="8"
                :key="'query' + index"
                v-show="toggleSearchStatus"
              >
                <online-query-form-item
                  :queryParam="queryParam"
                  :item="item"
                  :dictOptions="dictOptions"
                ></online-query-form-item>
              </a-col>
            </template>
            <template v-else>
              <a-col
                v-if="item.view == 'datetime'"
                :md="12"
                :sm="16"
                :key="'query' + index"
              >
                <online-query-form-item
                  :queryParam="queryParam"
                  :item="item"
                  :dictOptions="dictOptions"
                ></online-query-form-item>
              </a-col>
              <a-col v-else :md="6" :sm="8" :key="'query' + index">
                <online-query-form-item
                  :queryParam="queryParam"
                  :item="item"
                  :dictOptions="dictOptions"
                ></online-query-form-item>
              </a-col>
            </template>
          </template>

          <a-col :md="6" :sm="8">
            <span
              style="float: left;overflow: hidden;"
              class="table-page-search-submitButtons"
            >
              <a-button
                type="primary"
                @click="searchByquery"
                icon="search"
                style="margin-left:0px;font-size: 12px;height: 28px;padding: 0 10px;"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left:8px;font-size: 12px;height: 28px;padding: 0 10px;"
                >重置</a-button
              >
              <a
                @click="handleToggleSearch"
                style="margin-left:8px;font-size: 12px;height: 28px;padding: 0 10px;"
              >
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button
        v-if="buttonSwitch.add"
        @click="handleAdd"
        type="primary"
        icon="plus"
        style="margin-left:0px;font-size: 12px;height: 28px;padding: 0 10px;"
        >新增</a-button
      >
      <!-- 查看详情页面功能 -->
      <a-button
        @click="handleDetailWF"
        type="primary"
        icon="book"
        style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
        >详情</a-button
      >
      <a-button
        v-if="buttonSwitch.import"
        @click="handleImportXls"
        type="primary"
        icon="upload"
        style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
        >导入</a-button
      >
      <a-button
        v-if="buttonSwitch.export"
        @click="handleExportXls"
        type="primary"
        icon="download"
        style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
        >导出</a-button
      >
      <template v-if="hasBpmStatus">
        <!-- 处理自由流程功能 -->
        <a-button
          @click="handleFreeWF"
          type="primary"
          icon="share-alt"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >自由流</a-button
        >
        <!-- 提交审批操作功能 -->
        <a-button
          @click="handleSubmitWF"
          type="primary"
          icon="cloud-upload"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;display:none;"
          >提交</a-button
        >
        <!-- 撤销审批操作功能 -->
        <a-button
          @click="handleCancelWF"
          type="primary"
          icon="cloud-download"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >撤销</a-button
        >
        <a-button
          @click="handleNotifyWF"
          type="primary"
          icon="sound"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >知会</a-button
        >
        <a-button
          @click="handlePrintWF"
          type="primary"
          icon="printer"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >打印</a-button
        >
        <a-button
          @click="handleCollection"
          type="primary"
          icon="star"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >收藏</a-button
        >
        <a-button
          @click="handleShareWF"
          type="primary"
          icon="compass"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >分享</a-button
        >
      </template>
      <template v-if="code == '0b511f234f3847baa50106a14fff6215'"></template>
      <template v-if="code == 'd11901bc44f24a66b25b37a7a04c611e'"></template>
      <template
        v-if="cgButtonList && cgButtonList.length > 0"
        v-for="(item, index) in cgButtonList"
      >
        <a-button
          v-if="item.optType == 'js'"
          :key="'cgbtn' + index"
          @click="cgButtonJsHandler(item.buttonCode)"
          type="primary"
          :icon="item.buttonIcon"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >{{ item.buttonName }}</a-button
        >
        <a-button
          v-else-if="item.optType == 'action'"
          :key="'cgbtn' + index"
          @click="cgButtonActionHandler(item.buttonCode)"
          type="primary"
          :icon="item.buttonIcon"
          style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
          >{{ item.buttonName }}</a-button
        >
      </template>

      <a-button
        v-if="buttonSwitch.batch_delete"
        @click="handleDelBatch"
        style="margin-left:6px;font-size: 12px;height: 28px;padding: 0 10px;"
        v-show="
          table.selectionRows.length > 0 &&
            code != '0b511f234f3847baa50106a14fff6215' &&
            code != 'dae6cc0e7a7f4b7e9dc0fc36757fdc96' &&
            code != 'd11901bc44f24a66b25b37a7a04c611e'
        "
        ghost
        type="primary"
        icon="delete"
        >删除</a-button
      >
    </div>

    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        已选择&nbsp;
        <a style="font-weight: 600">{{ table.selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="cgformAutoList"
        bordered
        size="middle"
        rowKey="id"
        :columns="table.columns"
        :dataSource="table.dataSource"
        :pagination="pagination"
        :loading="table.loading"
        :rowSelection="{
          selectedRowKeys: table.selectedRowKeys,
          onChange: handleChangeInTableSelect,
        }"
        @change="handleTableChange"
        style="min-height: 300px"
      >
        <template slot="dateSlot" slot-scope="text">
          <span>{{ getFormatDate(text) }}</span>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;"
            >无此图片</span
          >
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt="图片不存在"
            style="max-width:80px;font-size: 12px;font-style: italic;"
          />
        </template>

        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;"
            >无此文件</span
          >
          <span v-else>
            <a-button
              type="primary"
              size="small"
              @click="uploadFile(text)"
              style="transform: scale(0.65,0.65);margin-left: -5px;margin-right: -5px;"
              >下载</a-button
            >
            <a-button
              type="primary"
              size="small"
              @click="viewFile(text)"
              style="transform: scale(0.65,0.65);margin-left: -5px;margin-right: -5px;"
              >预览</a-button
            >
          </span>
        </template>

        <div slot="filterDropdown">
          <a-card>
            <a-checkbox-group
              @change="onColSettingsChange"
              v-model="columns"
              :defaultValue="columns"
            >
              <a-row>
                <template v-for="(item, index) in columns">
                  <template
                    v-if="item.key != 'rowIndex' && item.dataIndex != 'action'"
                  >
                    <a-col :span="12">
                      <a-checkbox :value="item.dataIndex">
                        {{ item.title }}
                      </a-checkbox>
                    </a-col>
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </a-card>
        </div>
        <a-icon
          slot="filterIcon"
          type="setting"
          :style="{fontSize: '16px', color: '#108ee9'}"
        />

        <span slot="action" slot-scope="text, record">
          <template
            v-if="
              code != 'dae6cc0e7a7f4b7e9dc0fc36757fdc96' &&
                code != '0b511f234f3847baa50106a14fff6215' &&
                code != 'd11901bc44f24a66b25b37a7a04c611e'
            "
          >
            <a-dropdown>
              <a class="ant-dropdown-link">
                操作
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <template v-if="hasBpmStatus">
                  <template
                    v-if="
                      record.bpm_status == '1' ||
                        record.bpm_status == '' ||
                        record.bpm_status == null
                    "
                  >
                    <template v-if="buttonSwitch.update">
                      <a-menu-item>
                        <a href="javascript:;" @click="handleEdit(record)"
                          >编辑</a
                        >
                      </a-menu-item>
                    </template>
                  </template>
                </template>
                <template v-else>
                  <template v-if="buttonSwitch.update">
                    <a-menu-item>
                      <a href="javascript:;" @click="handleEdit(record)"
                        >编辑</a
                      >
                    </a-menu-item>
                  </template>
                </template>
                <template v-if="hasBpmStatus"></template>
                <template v-else>
                  <a-menu-item v-if="buttonSwitch.delete">
                    <a-popconfirm
                      title="确定删除吗?"
                      @confirm="() => handleDeleteOne(record)"
                    >
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                </template>
                <template
                  v-if="cgButtonLinkList && cgButtonLinkList.length > 0"
                  v-for="(btnItem, btnIndex) in cgButtonLinkList"
                >
                  <a-menu-item :key="'cgbtnLink' + btnIndex">
                    <a
                      href="javascript:void(0);"
                      @click="
                        cgButtonLinkHandler(
                          record,
                          btnItem.buttonCode,
                          btnItem.optType
                        )
                      "
                    >
                      <a-icon
                        v-if="btnItem.buttonIcon"
                        :type="btnItem.buttonIcon"
                      />
                      {{ btnItem.buttonName }}
                    </a>
                  </a-menu-item>
                </template>
              </a-menu>
            </a-dropdown>
          </template>
          <template v-else >--</template>
        </span>
      </a-table>

      <a-modal
        title="温馨提示"
        :visible="tipVisible"
        @ok="tipHandleOk"
        :confirmLoading="tipConfirmLoading"
        @cancel="tipHandleCancel"
      >
        <p>{{ tipContent }}</p>
      </a-modal>

      <OnlCgformAutoModal
        @success="handleFormSuccess"
        ref="modal"
        :code="code"
      ></OnlCgformAutoModal>

      <j-import-modal
        ref="importModal"
        :url="getImportUrl()"
        @ok="importOk"
      ></j-import-modal>
    </div>
  </a-card>
</template>

<script>
//import Vue from "vue";
import JImportModal from '@/components/jeecg/JImportModal';

import * as dictSelectUtil from '@/components/dict/JDictSelectUtil';
import * as requestAPI from '@/utils/request';
import * as manageAPI from '@/api/manage';
import * as handleAPI from '@/api/autoAPI/handle';
import * as workflowAPI from '@/api/workflow';
import * as storage from '@/utils/storage';
import * as tools from '@/utils/util';
import * as mutationTypes from '@/store/mutation-types';
//import * as FileSaver from 'file-saver';

window.mutationTypes = mutationTypes;
window.requestAPI = requestAPI;
window.manageAPI = manageAPI;
window.storage = storage;
window.tools = tools;
window.handleAPI = handleAPI;
window.workflowAPI = workflowAPI;

export default {
  name: 'OnlCgFormAutoList',
  components: {
    JImportModal,
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showQuickJumper: true,
        showSizeChanger: false,
        total: 0,
      },
      code: '',
      fixedWFlow: '',
      modelModal: false,
      modelWFlowSelection: '',
      rights: [],
      description: '在线报表',
      currentTableName: '',
      tipContent: '',
      tipVisible: false,
      tipConfirmLoading: false,
      url: {
        getQueryInfo: '/online/cgform/api/getQueryInfo/',
        getColumns: '/online/cgform/api/getColumns/',
        getData: '/online/cgform/api/getData/',
        optPre: '/online/cgform/api/form/',
        exportXls: '/online/cgform/api/exportXls/',
        buttonAction: '/online/cgform/api/doButton',
      },
      flowCodePre: 'onl_',
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      dictOptions: {},
      cgButtonLinkList: [],
      cgButtonList: [],
      queryInfo: [],
      queryParam: {},
      cityList: [],
      toggleSearchStatus: false,
      table: {
        loading: true,
        // 表头
        columns: [],
        //列设置
        settingColumns: [],
        //数据集
        dataSource: [],
        // 选择器
        selectedRowKeys: [],
        selectionRows: [],
        // 分页参数
        pagination: {
          current: 1,
          pageSize: 10000,
          pageSizeOptions: ['10000'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条';
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
        },
      },
      actionColumn: {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: {
          customRender: 'action',
        },
        fixed: 'right',
        align: 'center',
        width: 80,
      },
      formTemplate: '99',
      EnhanceJS: '',
      hideColumns: ['content'],
      buttonSwitch: {
        add: true,
        update: true,
        delete: true,
        batch_delete: true,
        import: true,
        export: true,
      },
      hasBpmStatus: false,
    };
  },
  async created() {
    //执行初始化函数
    this.init();
  },
  async mounted() {
    //执行初始化函数
    this.init();
  },
  watch: {
    async $route() {
      //执行初始化函数
      this.init();
    },
  },
  methods: {

    /**
     * @function 初始化函数
     */
    async init(){
      await handleAPI.initComponent(this , manageAPI);
    },

    /**
     * @function 检查页面code参数函数
     */
    queryCode() {
       handleAPI.queryCode(this);
    },

    /**
     * @function 弹框点击OK事件函数
     */
    tipHandleOk() {
      handleAPI.tipHandleOk(this);
    },

    /**
     * @function 弹框点击取消事件函数
     */
    tipHandleCancel() {
      handleAPI.tipHandleCancel(this);
    },

    /**
     * @function 过滤流程状态函数
     */
    hasBpmStatusFilter() {
      handleAPI.hasBpmStatusFilter(this);
    },

    /**
     * @function 弹框处理函数
     */
    modalOk() {
      handleAPI.modalOk(this);
    },

    /**
     * @function deNull函数（去掉空字符串）
     */
    deStringNull(data) {
      return tools.deNull(data);
    },

    /**
     * @function 初始化查询信息函数
     */
    async initQueryInfo() {
      //查询初始化信息
      await handleAPI.initQueryInfo(this , manageAPI);
    },

    /**
     * @function 初始化表单函数
     */
    async initAutoList() {
      //初始化表单数据
      await handleAPI.initAutoList(this, manageAPI, tools, dictSelectUtil);
    },

    /**
     * @function 获取流程日志函数
     */
    async processLog(business_data_id, record) {
      await handleAPI.processLog(this, storage, manageAPI, business_data_id, record);
    },

    /**
     * @function 加载数据函数
     */
    async loadData(arg) {
      await handleAPI.loadData(this, arg, handleAPI, manageAPI, storage, tools)
    },

    /**
     * @function 获取查询条件函数
     */
    getQueryParams() {
      return handleAPI.getQueryParams(this, storage, tools);
    },

    /**
     * @function 处理列表选择改变事件函数
     */
    handleChangeInTableSelect(selectedRowKeys, selectionRows) {
      this.table.selectedRowKeys = selectedRowKeys;
      this.table.selectionRows = selectionRows;
    },

    /**
     * @function 处理列表页面变化事件函数
     */
    handleTableChange(pagination) {
      this.pagination = pagination;
    },

    /**
     * @function 处理新增记录事件函数
     */
    handleAdd() {
      this.cgButtonJsHandler('beforeAdd');
      this.$refs.modal.add(this.formTemplate);
    },

    /**
     * @function 处理导入数据事件函数
     */
    handleImportXls() {
      this.$refs.importModal.show();
    },

    /**
     * @function 打印表单功能函数
     */
    async handlePrintWF() {
      await handleAPI.handlePrintWF(this, storage, manageAPI);
    },

    /**
     * @function 自由流知会功能函数
     */
    async handleNotifyWF() {
      await handleAPI.handleNotifyWF(this, storage, tools, manageAPI);
    },

    /**
     * @function 处理自由流程函数
     */
    async handleFreeWF() {
      await handleAPI.handleFreeWF(this, storage, manageAPI);
    },

    /**
     * @function 分享详情函数
     */
    async handleShareWF() {
      await handleAPI.handleShareWF(this, storage, tools, manageAPI);
    },

    /**
     * @function 查看详情函数
     */
    async handleDetailWF() {
      await handleAPI.handleDetailWF(this, storage, tools, manageAPI);
    },

    /**
     * @function 知会确认函数
     */
    async handleConfirmWF() {
      return await handleAPI.handleConfirmWF(this, storage, tools, manageAPI);
    },

    /**
     * @function 同意审批函数
     */
    async handleApproveWF() {
      return await handleAPI.handleApproveWF(this , storage, tools , manageAPI);
    },

    /**
     * @function 驳回审批函数
     */
    async handleRejectWF() {
      return await handleAPI.handleRejectWF(this, storage, tools, manageAPI);
    },

    /**
     * @function 提交审批函数
     */
    async handleSubmitWF() {
      return await handleAPI.handleSubmitWF(this, tools, storage, manageAPI);
    },

    /**
     * @function 取消审批函数
     */
    async handleCancelWF() {
      return await handleAPI.handleCancelWF(this, storage, tools, manageAPI, workflowAPI);
    },

    /**
     * @function 导入完成回调函数
     */
    importOk() {
      this.loadData(1);
    },

    /**
     * @function 处理导出Excel函数
     */
    handleExportXls2() {
      handleAPI.handleExportXls2(this, storage, tools, manageAPI);
    },

    /**
     * @function 处理导出Excel函数
     */
    handleExportXls() {
      handleAPI.handleExportXls(this, storage, tools, manageAPI);
    },

    /**
     * @function 处理编辑操作函数
     */
    handleEdit(record) {
      this.cgButtonLinkHandler(record, 'beforeEdit', 'js');
      this.$refs.modal.edit(this.formTemplate, record.id);
    },

    /**
     * @function 处理查看详情函数
     */
    handleDetail(record) {
      this.$refs.modal.detail(this.formTemplate, record.id);
    },

    /**
     * @function 删除记录函数
     */
    handleDeleteOne(record) {
      this.cgButtonLinkHandler(record, 'beforeDelete', 'js');
      this.handleDelete(record.id);
    },

    /**
     * @function 删除记录函数（通过ID）
     */
    handleDelete(id) {
      handleAPI.handleDelete(this, id , manageAPI);
    },

    /**
     * @function 处理表单成功（刷新页面）
     */
    handleFormSuccess() {
      this.loadData();
    },

    /**
     * @function 清空选中记录
     */
    onClearSelected() {
      this.table.selectedRowKeys = [];
      this.table.selectionRows = [];
    },

    /**
     * @function 获取文件数组中的第一个文件函数
     */
    queryFirstFile(text){
      return text && text.indexOf(',') > 0 ? text.substring(0, text.indexOf(',')) : text;
    },

    /**
     * @function 获取文件URL函数
     */
    getImgView(text) {
      return window._CONFIG['downloadURL'] + '/' + this.queryFirstFile(text);
    },

    /**
     * @function 下载文件函数
     */
    uploadFile(text) {
      try {
        this.$message.warning('开始下载中，请稍等...');
        window.saveAs(this.getImgView(text) , this.queryFirstFile(text));
      } catch (error) {
        window.open(this.getImgView(text));
      }
    },

    /**
     * @function 预览文档函数
     */
    viewFile(text) {
      handleAPI.viewFile(this, text);
    },

    /**
     * @function 处理批量删除函数
     */
    handleDelBatch() {
      handleAPI.handleDelBatch(this);
    },

    /**
     * @function 执行搜索操作
     */
    searchByquery() {
      this.loadData(1);
    },

    /**
     * @function 搜索条件重置
     */
    searchReset() {
      this.queryParam = {};
      this.loadData(1);
    },

    /**
     * @function 处理Toggle搜索功能函数
     */
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },

    /**
     * @function 格式化日期函数
     */
    getFormatDate(text) {
      return handleAPI.getFormatDate(text);
    },

    /**
     * @function 获取导入地址函数
     */
    getImportUrl() {
      return '/online/cgform/api/importXls/' + this.code;
    },

    /**
     * @function 初始化EnhanceJs函数
     */
    initCgEnhanceJs(enhanceJs) {
      handleAPI.initCgEnhanceJs(enhanceJs, this, manageAPI);
    },

    /**
     * @function 初始化自定义按钮函数
     */
    initCgButtonList(btnList) {
      handleAPI.initCgButtonList(btnList, this);
    },

    /**
     * @function 按钮JS执行函数
     */
    cgButtonJsHandler(buttonCode) {
      handleAPI.cgButtonJsHandler(buttonCode , this);
    },

    /**
     * @function 按钮执行操作函数
     */
    cgButtonActionHandler(buttonCode) {
      handleAPI.cgButtonActionHandler(buttonCode, this, manageAPI);
    },

    /**
     * @function 按钮链接处理函数
     */
    cgButtonLinkHandler(record, buttonCode, optType) {
      handleAPI.cgButtonLinkHandler(record, buttonCode, optType, this, manageAPI);
    },

    /**
     * @function 初始化按钮切换函数
     */
    initButtonSwitch(hideColumns) {
      handleAPI.initButtonSwitch(hideColumns, this);
    },
  },
};
</script>
<style>
</style>
